<template>
    <div class="list">

        <sls-table-head
                @onSearch="onSearch"
                @onBtnEvent="onBtnEvent"
                :Batch="batch"
                :Search="search"
                :BtnInfo="btn_info">
            <span slot="sls-header-after"><slot name="header-after"></slot></span>
            <span slot="sls-header-before"><slot name="header-before"></slot></span>
        </sls-table-head>

        <el-table border style="width: 100%" align='center'
                  :data="list"
                  @selection-change='onSelectionChange'>

            <el-table-column type="expand"
                             v-if='expand && expand.show && expand.show===true && (!expand.position || expand.position==="left")'>
                <template scope="scope">
                    <slot name="expand"
                          :data="scope.row"
                          :index="scope.$index"></slot>
                </template>
            </el-table-column>

            <el-table-column v-if='btn_info.batch!==false'
                             type="selection"
                             width="55">
            </el-table-column>

            <template v-for='(field,index) in fields'>
                <el-table-column v-if='field.type && field.type==="expand"' :key='"expand"+index' type="expand">
                    <template scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item :key='"form"+eindex' v-for='(expand,eindex) in field.list' :label="expand.label + ':'">
                                
                                <template v-if="expand.type && expand.type === 'img'">
                                    <img width="100" height="100" :src="props.row[expand.key]" alt="" @click="showImg(props.row[expand.key])">
                                </template>
                                <template v-if="expand.type && expand.type === 'imgs'">
                                    <img :src="img" width="100" height="100" :key='"img"+imgindex' v-for='(img, imgindex) in props.row[expand.key]' alt="" @click="showImgs(props.row[expand.key], imgindex)">
                                </template>
                                <template v-if="!expand.type">
                                    <span>{{!!expand.formatter ?　expand.formatter(props.row[expand.key]) : props.row[expand.key]}}</span>
                                </template>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        :key='"text"+index'
                        v-if='!field.type'
                        :prop="field.key"
                        :label="field.label"
                        :align="field.align || 'center'"
                        :sortable="field.sort || false"
                        :formatter='field.formatter'
                        :filters='field.filter_list'
                        :filter-method="field.filter_method"
                        :filter-multiple="field.filter_multiple"
                        :style='field.style'
                        :width='field.width'>
                </el-table-column>
                <el-table-column
                        :key='"image"+index'
                        v-if='field.type && field.type==="image"'
                        :prop="field.key"
                        :label="field.label"
                        :align="field.align || 'center'"
                        :width='field.width'>
                    <template scope='scope'>
                        <img :src="(field.host || '')+scope.row[field.key]" alt="" @click="showImg((field.host || '')+scope.row[field.key])">
                    </template>
                </el-table-column>
                <el-table-column
                        :key='"link"+index'
                        v-if='field.type && field.type==="link"'
                        :prop="field.key"
                        :label="field.label"
                        :align="field.align || 'center'"
                        :width='field.width'>
                    <template scope='scope'>
                        <a :target="field.link_target || '_self'"
                            :href="scope.row[field.key]">{{field.link_text || scope.row[field.key]}}</a>
                    </template>
                </el-table-column>
            </template>

            <el-table-column
                    v-if="btn_info.all!==false"
                    :label="btn_info.label || '操作'"
                    :width="btn_info.width || 160"
                    :context="_self"
                    :fixed="btn_info.fixed || undefined">
                <template scope='scope'>
                    <el-button
                            v-if='btn_info.list && btn_info.list_position==="before"'
                            v-for='(btn,index) in btn_info.list'
                            :key='btn.text'
                            :type="btn.type || 'info'"
                            size="mini"
                            @click='onCustomBtnEvent({list:list,data:scope.row,dataIndex:scope.$index,btnIndex:index,btnInfo:btn})'>
                        {{btn.text}}
                    </el-button>

                    <span v-if="btn_info.default!==false">
                        <el-button
                                v-if='btn_info.select!==false || (!!btn_info.select_func && btn_info.select_func(scope.row))'
                                type="info"
                                :icon='btn_info.select_icon || "view"'
                                size="mini"
                                @click='onBtnEvent({type:"Select",data:scope.row,dataIndex:scope.$index,list:list})'>{{btn_info.select_text ||　(!!btn_info.select_text_func && btn_info.select_text_func(scope.row)) || ''}}</el-button>
                        <el-button
                                v-if='btn_info.update!==false || (!!btn_info.update_func && btn_info.update_func(scope.row))'
                                type="info"
                                :icon='btn_info.update_icon || "edit"'
                                size="mini"
                                @click='onBtnEvent({type:"Update",data:scope.row,dataIndex:scope.$index,list:list})'>{{btn_info.update_text ||　(!!btn_info.update_text_func && btn_info.update_text_func(scope.row)) || ''}}</el-button>
                        <el-button
                                v-if='btn_info.delete!==false || (!!btn_info.delete_func && btn_info.delete_func(scope.row))'
                                type="danger"
                                :icon='btn_info.delete_icon || "delete"'
                                size="mini"
                                @click='onBtnEvent({type:"Delete",data:scope.row,dataIndex:scope.$index,list:list})'>{{btn_info.delete_text ||　(!!btn_info.delete_text_func && btn_info.delete_text_func(scope.row)) || ''}}</el-button>
                    </span>

                    <!--
                      my-key-listlmy-key-listlist,data:scope.row,dataIndex:scope.$index,btnIndex:index,btnInfo:btn}
                    -->
                    <el-button
                            v-if='btn_info.list && (btn_info.list_position==="after" || !btn_info.list_position)'
                            v-for='(btn,index) in btn_info.list'
                            :key='btn.text'
                            :type="btn.type || 'info'"
                            size="mini"
                            @click='onCustomBtnEvent({list:list,data:scope.row,dataIndex:scope.$index,btnIndex:index,btn:btn})'>
                        {{btn.text}}
                    </el-button>
                </template>
            </el-table-column>


            <el-table-column type="expand"
                             :context="_self"
                             v-if='expand && expand.show && expand.show===true && expand.position && expand.position==="right"'>
                <template scope="scope">
                    <slot name="expand"
                          :data="scope.row"
                          :index="scope.$index"></slot>
                </template>
            </el-table-column>
        </el-table>
        <el-col :span="24" class='btm-action'>
            <el-pagination
                    v-if='pagination  && ( (pagination.total!==undefined && pagination.total>0) || (pagination["page-count"]!==undefined && pagination["page-count"]>0) )'
                    class='pagination'
                    :page-sizes="pagination.page_sizes"
                    :page-size="pagination.page_size"
                    :page-count="pagination['page-count']"
                    :layout="pagination.layout"
                    :total="pagination.total"
                    :current-page='pagination.current_page'
                    @current-change='onChangeCurrentPage'
                    @size-change='onChangePageSize'>
            </el-pagination>
        </el-col>
    </div>
</template>

<script>
import ListDataJs from "./ListData.js";
export default ListDataJs;
</script>
<style scoped lang='less'>
.demo-form-inline {
  display: inline-block;
  float: right;
}

.btm-action {
  margin-top: 20px;
  text-align: center;
}

.actions-top {
  /*line-height : 46px;*/
}

.pagination {
  display: inline-block;
}

.list {
  table {
    img {
      margin-top: 5px;
      max-width: 100%;
      height: auto;
    }
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33%;
}
</style>
